<template>
  <view class="content">
    <uni-list>
      <uni-list-item class="font-28" title="当前已养成狗数" :rightText="topNum || 0 + '只'"></uni-list-item>
      <uni-list-item>
        <template v-slot:body>
          <view class="fd">
            <text>置换狗数</text>
            <input v-model="num" placeholder="请输入狗数" />
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <text class="mar-top">注:置换后不可撤销</text>

    <button @click="onSubmit" type="default">确认置换茶包</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getGoodsLaunchNum, goodsLaunch } from '@/api/bgame';
import { useUserStoreHook } from '@/store/user';
const num: any = ref('');
const topNum = ref(0);
const topMax = ref(0);
const onSubmit = async () => {
  uni.showToast({
    title: '开发中。。。',
    mask: true,
    icon: 'error',
  });
  return;
  if (!num.value) {
    uni.showToast({
      title: '请输入投放的数量',
      mask: true,
      icon: 'error',
    });
    return;
  }
  if (num.value - topNum.value > 0 || num.value - topMax.value > 0) {
    uni.showToast({
      title: '投放的数量过多',
      mask: true,
      icon: 'error',
    });
    return;
  }

  uni.showLoading({
    title: '投放中...',
    mask: true,
  });
  const res = await goodsLaunch({
    count: num.value,
  });
  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '投放成功',
      icon: 'none',
    });
    getData();
  } else {
    uni.showToast({
      title: res.msg.msg || '投放失败',
      mask: true,
      icon: 'error',
    });
  }
};
const getData = async () => {
  uni.showLoading({
    title: '获取数据中...',
    mask: true,
  });
  const res = await getGoodsLaunchNum({});
  uni.hideLoading();

  if (1 == res.result) {
    const { count = 0, max = 100 } = res.data || {};
    topNum.value = count;
    topMax.value = max;
  }
};
onLoad((option) => {
  getData();
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 44px);
  padding: 8rpx;
  display: flex;
  flex-direction: column;

  .mar-top {
    margin-top: 30rpx;
  }

  text {
    width: 100%;
    padding: 5rpx;
    margin-top: 5rpx;
  }

  button {
    margin: 30rpx;
    padding: 5rpx;
    color: white;
    background-color: #009900;
  }
}

.fd {
  width: 100%;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;

  input {
    margin-top: 10rpx;
  }
}

.font-28 {
  font-size: 28rpx;
}
</style>
